<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
      条件渲染
        是什么：根据一个条件来控制元素的渲染与否。
        如何用：使用 v-if / v-else-if / v-else
        PS:
            1. v-else-if 和 v-else 不能单独使用，需要配合 v-if 使用，就跟原生JS中一样
      
      v-show 指令
        是什么：用于控制元素的显示与否


      面试题，v-if与v-show的区别：
        两者都是用于控制元素的显示隐藏的指令，区别在于：
          1. v-if 是控制元素的渲染，v-show 是控制元素的样式
          2. 当条件为 false 时，v-if 控制的元素会直接被销毁（从DOM上移除了）
                              v-show 控制的元素只是设置了 display: none .(DOM上没有移除)
          3. v-if 才是真正的条件渲染，条件为 true 时，元素才会被创建挂载。
          4. v-show 有更高的初次渲染开销：不管默认条件为true Or false，该元素都会被创建出来。
          5. v-if 有更高的切换开销：当条件变化时，元素会频繁的处理创建销毁的动作。
          6. 如果元素需要频繁的切换，推荐使用 v-show 。否则使用 v-if 即可。
   -->
    <div id="app">
      <div v-if="isShow" class="box">我使用 v-if 来控制</div>
      <div v-show="isShow" class="box">我使用 v-show 来控制</div>

      <hr />

      <button @click="toggle">控制，下面box的显示隐藏</button>

      <div v-if="isShow" class="box"></div>

      <p v-if="userInfo">
        欢迎你，{{ userInfo.name }}，<button @click="handleLogout">退出</button>
      </p>
      <p v-else>
        <button @click="handleLogin">登录</button>
      </p>
      <hr />
      <p v-if="score >= 90">优秀</p>
      <p v-else-if="score >= 80">良好</p>
      <p v-else-if="score >= 60">及格</p>
      <p v-else>差</p>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          score: 100,
          isShow: false,
          msg: "hello",
          // 表示当前登录的用户的信息
          //      null  ||  { name: '张三', age: 18 }
          userInfo: null,
        },
        methods: {
          toggle() {
            this.isShow = !this.isShow;
          },

          handleLogin() {
            this.userInfo = {
              name: "张三",
            };
          },

          handleLogout() {
            this.userInfo = null;
          },
        },
      });
    </script>
  </body>
</html>
